<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ski</title>
  <!-- 导入bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
  <!-- 导入动画 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css">
  <!-- 导入初始化 -->
  <link rel="stylesheet" href="./assets/css/reset.css">
  <!-- 导入自己的样式 -->
  <link rel="stylesheet/less" href="./assets/css/index.less">
</head>

<body>

  <!-- 头部 -->
  <header id="header">
    <nav class="navbar navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">SHOP</a></li>
            <li><a href="#">TEAM</a></li>
            <li><a href="#">EVENTS</a></li>
            <li><a href="#">EXPERIENCE</a></li>
            <li><a href="#">COMPANY</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><img src="./assets/images/search icon.png" alt=""></a></li>
            <li><a href="#"><img src="./assets/images/shopping bag icon.png" alt=""></a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </header>

  <!-- banner图 -->
  <div class="banner">
    <div class="container">

      <div class="desc">
        <h1>Run Over <br /> Everything</h1>
        <div class="button">
          <a href="#">See Details</a>
        </div>
      </div>

    </div>
  </div>

  <!-- snowboards -->
  <div class="snowboards">
    <div class="container">
      <h1>snowboards</h1>
      <p>Aliquam erat volutpat. Curabitur ut consequat arcu eget laoreet est</p>
      <img src="./assets/images/x.png" alt="">
      <ul class="imgs">
        <li><img src="./assets/images/board1.jpeg" alt=""></li>
        <li><img src="./assets/images/board2.jpeg" alt=""></li>
        <li><img src="./assets/images/board3.jpeg" alt=""></li>
        <li><img src="./assets/images/board4.jpeg" alt=""></li>
        <li><img src="./assets/images/board5.jpeg" alt=""></li>
      </ul>
    </div>
  </div>

  <!-- Mountains -->
  <div class="mountains">
    <div class="container">
      <div class="desc">
        <h1>
          The Mountains
          <br />
          Snowboarding ®
        </h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt auctor facilisis. Nam massa dui,
          imperdiet et mi ut, sagittis viverra odio. Duis et lectus eu enim gravida vulputate nec eget nisi. Nunc
          ultrices velit blandit, dapibus lacus in, feugiat erat. Donec non porttitor augue, sit amet lacinia purus.
          Nulla fringilla quam est, luctus dapibus odio suscipit ut. Vivamus et lectus a nunc fringilla volutpat. Morbi
          sed congue sem.
        </p>
        <p>
          Aliquam erat volutpat. Curabitur ut consequat arcu, eget laoreet est. Vivamus semper nibh sit amet libero
          hendrerit luctus. Fusce non bibendum lorem. Fusce laoreet risus eget tortor lobortis egestas. Etiam tempus
          quam sed felis viverra scelerisque. Integer fringilla libero risus, vel euismod turpis auctor ac. Proin
          elementum aliquet libero a dapibus. Mauris et tempor dolor.</p>
      </div>
    </div>
  </div>

  <!-- Features -->
  <div class="features">
    <div class="container">
      <div class="title">
        <h1>Features</h1>
      </div>
      <img src="./assets/images/x.png" alt="">
      <div class="imgs">
        <div class="demo">
          <div class="tu">
            <img src="./assets/images/pic1.jpeg" alt="">
          </div>
          <p>Born Identity: Bringing Burton Hardgoods to Life</p>
        </div>
        <div class="demo">
          <div class="tu">
            <img src="./assets/images/pic2.jpeg" alt="">
          </div>
          <p>Jeremy Jones: On That Street Grind</p>
        </div>
        <div class="demo">
          <div class="tu">
            <img src="./assets/images/pic3.jpeg" alt="">
          </div>
          <p>Burton’s Tokyo Rail Days Recap</p>
        </div>
        <div class="demo">
          <div class="tu">
            <img src="./assets/images/pic4.jpeg" alt="">
          </div>
          <p>Burton’s Tokyo Rail Days Preview</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Foot -->
  <div class="foot">
    <div class="container">
      <div class="desc">
        <div class="demo">
          <div class="name">
            <h3>Products</h3>
          </div>
          <ul>
            <li>Mens</li>
            <li>Womens</li>
            <li>Youth</li>
          </ul>

        </div>
        <div class="demo">
          <div class="name">
            <h3>About</h3>
          </div>
          <ul>
            <li>Careers and Internships</li>
            <li>Sponsorships</li>
            <li>team</li>
            <li>Catalog Request/Download</li>
          </ul>

        </div>
        <div class="demo">
          <div class="name">
            <h3>Customer Support</h3>
          </div>

          <ul>
            <li>Contact Us</li>
            <li>Shipping and Order Tracking</li>
            <li>Easy Returns</li>
            <li>Warranty</li>
            <li>Replacement Binding Parts</li>
          </ul>

        </div>
        <div class="demo">
          <div class="name">
            <h3>Newsletter</h3>
          </div>
          <div class="inputbox">
            <input type="email" name="email" id="email" placeholder="Enter your email">
            <div>GO</div>
          </div>
          <div class="icon">
            <div class="tu">
             <a href="#"><img src="./assets/images/footer1.png" alt=""></a> 
            </div>
            <div class="tu">
              <a href="#"><img src="./assets/images/footer2.png" alt=""></a>
            </div>
            <div class="tu">
              <a href="#"><img src="./assets/images/footer3.png" alt=""></a>
            </div>
            <div class="tu">
              <a href="#"><img src="./assets/images/footer4.png" alt=""></a>
            </div>
            <div class="tu">
              <a href="#"><img src="./assets/images/footer5.png" alt=""></a>
              
            </div>
          </div>

        </div>
      </div>
      <div class="footer">
        <div class="left">
          © 2014 Mountains Snowboards
          <p>
            <a href="https://beian.miit.gov.cn/" target="_blank">备案号</a>
            <a href="https://beian.miit.gov.cn/" target="_blank">辽ICP备2023012557号</a>
            </p>
        </div>
        <div class="right">
          <img src="./assets/images/as.png" alt="">
          Change Region
        </div>
      </div>
    </div>
  </div>
</body>

</html>

<!-- 导入jquery -->
<script src="./assets/js/jquery.min.js"></script>
<!-- 导入bootstrap的js -->
<script src="./assets/js/bootstrap.min.js"></script>
<!-- 导入识别less的js -->
<script src="./assets/js/less.min.js"></script>
<!-- 导入动画的js -->
<script src="./assets/js/wow.min.js"></script>
<script>
  new WOW().init();
</script>